<template>
	<uni-popup
		class="file-select-popup"
		ref="popupRef"
		:animation="props.animation"
		:type="props.type"
		:is-mask-click="props.isMaskClick"
		:mask-background-color="props.maskBackgroundColor"
		:background-color="props.backgroundColor"
		:border-radius="props.borderRadius"
		:safe-area="props.safearea"
	>
		<view class="selector">
			<view :class="{cancel: item.value === 'cancel'}" @click="clickToChoose(item.value)" v-for="(item, idx) in types" :key="idx" class="item">{{item.label}}</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref, withDefaults, onMounted, defineExpose, computed } from "vue";
import { onHide } from "@dcloudio/uni-app";


type SelectItem = "wxchat" | "local" | "cancel";

export type ChooseType = Exclude<SelectItem, "cancel">;

const popupRef = ref(null);

const SelectItems: Array<{
	label: string,
	value: SelectItem
}> = [
	{
		label: "从微信聊天选择文件",
		value: "wxchat"
	},
	{
		label: "从手机选择文件",
		value: "local"
	},
	{
		label: "取消",
		value: "cancel"
	}
];

interface Props {
	allowed?: ChooseType[],
	animation: boolean,
	type: "top" | "center" | "bottom" | "left" | "right" | "message" | "dialog" | "share",
	isMaskClick: boolean,
	maskBackgroundColor: string,
	backgroundColor: string,
	borderRadius: string,
	safearea: boolean,
}

const props = withDefaults(defineProps<Props>(), {
	allowed: () => ["wxchat", "local"],
	animation: true, // 是否开启动画
	type: "bottom", // 弹出方式
	isMaskClick: true, // 蒙版点击是否关闭弹窗
	maskBackgroundColor: "rgba(0,0,0,0.4)", // 蒙版颜色，建议使用 rgba 颜色值
	backgroundColor: "#fff", // 主窗口背景色
	borderRadius: '20rpx 20rpx 0 0', // 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
	safearea: false, // 是否适配底部安全区
})

onMounted(() => {
})

const types = computed(() => {
	return SelectItems.filter((item) => item.value === "cancel" || props.allowed.includes(item.value))
})

const emit = defineEmits<{
	change: [value: ChooseType]
}>();

const clickToChoose = (type: SelectItem) => {
	if (type !== "cancel") {
		emit("change", type);
	}
	close();
}

function open() {
	popupRef.value && (popupRef.value as any).open();
}

function close() {
	popupRef.value && (popupRef.value as any).close();
}


// 暴露方法给父组件
defineExpose({
	open,
	close,
})
</script>

<style lang="scss">
.file-select-popup {
	.selector {
		text-align: center;
		font-size: 1.2em;
		// padding: 20rpx;
		
		.item {
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
		}
		
		.item:not(.cancel) {
			
			border-top: 1rpx solid #eee;
		}

		.item:first-child {
			border: none;
		}
		
		.cancel {
			height: auto;
			border-top: 20rpx solid #eee;
		}
	}
}
</style>